<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>治理设备</title>
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/coal-shed-3.css">
		<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	</head>
	<body>
		<div class="main-page">
			<div class="page-body flex">
				<div class="sub-page-container">
					<div class="right-content-wrapper page-coal-shed">
						<div class="right-content-box">
							<ul class="tags">
								<li>&lt;</li>
								<li>返回</li>
								<li> | </li>
								<li>有组织</li>
								<li>&gt;</li>
								<li>煤棚1#</li>
								<li>&gt;</li>
								<li>治理设备</li>
							</ul>
							<div class="content-section">
								<!-- 左边部分 -->
								<div class="left-section">
									<div class="card ec">
										<p class="card-title">环境参数(mg/m³)</p>
										<div class="content-body flex">
											<canvas width="160" height="160" id="circle"></canvas>
										</div>
									</div>
									<div class="ec-2">
										<p class="card-title">12小时内均值</p>
										<div class="ec-box" id="region">
											
										</div>
									</div>
								</div>
								<!-- 中间表格 -->
								<div class="center-section">
									<div class="tools ">
										<div class="date-input day" id="dateBtn"><input type="text" id="date" autocomplete="off" placeholder="选择日期">
										</div>
										<ul class="shops-box flex">
										<li class="btn"><span class="shops-img"><img src="assets/img/dressing.png" ></span><span class="shops-span">筛选</span></li>
											<li class="btn"><span class="shops-img"><img src="assets/img/print.png" ></span><span class="shops-span">打印</span></li>
											<li class="btn"><span class="shops-img"><img src="assets/img/arrowhead.png" ></span><span class="shops-span">导出</span></li>
										</ul>
									</div>
									<div class="table-center">
										<p class="card-title">治理数据</p>
										<div class="content-body">
											<table class="table">
												<thead>
													<tr>
														<th>时间</th>
														<th>粉尘浓度(mg/m³)</th>
														<th>PM2.5(mg/m³)</th>
														<th>PM10(mg/m³)</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr>
													<tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr>
													<tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr><tr>
														<td>2021-04-27 17:34:00</td>
														<td>0.228</td>
														<td>0.050</td>
														<td>0.050</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="pagination-section flex">
											<div id="pagination"></div>
										</div>
									</div>
								</div>
								<!-- 右边部分 -->
								<div class="right-section">
									<div class="card ">
										<p class="card-title">运行状态</p>
										<ul class="card-table">
											<li class="card-li"><span class="card-span">道路标准</span><span class="card-span2">1mg/m³</span></li>
											<li class="card-li"><span class="card-span">时间</span><span class="card-span2">2021-04-27 17:34:00</span></li>
											<li class="card-li"><span class="card-span">pm10（mg/m³）</span><span class="card-span2">0.228</span></li>
											<li class="card-li"><span class="card-span">pm2.5（mg/m³）</span><span class="card-span2">0.050</span></li>
											<li class="card-li"><span class="card-span">温度</span><span class="card-span2">0</span></li>
											<li class="card-li"><span class="card-span">温度</span><span class="card-span2">待机</span></li>
										</ul>
										
									</div>
									 <div class="card-2 mgt-10">
									</div> 
									<div class="card mist">
										<div class="card-title device-state">
											<span class="grow">6#喷雾机</span>
											<span class="state inline">在线</span>
										</div> 
										<div class="content-body flex">
											<img src="assets/img/card-img.png" >
										</div>
									</div>
								</div>
							</div>
						</div>
						<span class="close-btn"></span>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script src="assets/js/preview.js"></script> 
		<script src="assets/js/circleChart.js"></script> 
		<script>
		
			var pageObj = function(){
				this.init();
				this.initChart3();
				}
				pageObj.prototype.init = function(){
					this.bindEvent();
				}
				pageObj.prototype.bindEvent = function(){
					let self = this;
				}
				// 渲染底部菜单
				new Footer({
			        el:".main-page",
			        curMenu:"有组织",
			        size:4,
			        menus:[
			            {href:"有组织.html",text:"有组织"},
			            {href:"无组织.html",text:"无组织"},
			            {href:"车辆出入.html",text:"清洁运输"},
			            {href:"视频.html",text:"视频大厅"}
			        ]
			    });
				
				layui.use(['laypage', 'laydate'], function(){
					let laypage = layui.laypage;
					let laydate = layui.laydate;

					laypage.render({
					    elem: 'pagination'
					    ,count: 20
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] 
					    ,jump: function(obj){
					      	console.log(obj)
					    }
				  	});

				  	laydate.render({
					    elem: '#dateBtn'
					    ,type: 'datetime'
					    ,done: function(value, date){
						    $("#date").val(value)
						}
					});
				})


			    // 渲染左侧菜单树
				new LeftSiderMenu({
				    el:".sub-page-container",
				    size:10,
				    curMenu:"炼钢生产区",
				    menus:[
				        {href:"炼钢生产区.html",text:"炼钢生产区"},
				        {href:"球团生产区.html",text:"球团生产区"},
				        {href:"轧钢生产区.html",text:"轧钢生产区"},
				        {href:"带钢生产区.html",text:"带钢生产区"},
						{href:"雾炮.html",text:"煤棚2#"},
						{href:"煤棚3.html",text:"煤棚3#"}
				    ]
				});


				new CircleChart({
					el:"#circle",
					maxValue:100,			//最大值
					value:30,			//当前值
					name:"颗粒物浓度"			//名称
				})

			// echars
			pageObj.prototype.initChart3 = function() {
				var regionChart=echarts.init(document.getElementById('region'));
				regionChart.setOption({
					color:['#0081FF','#7748CD','#CC5FFA'],
	  				tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend:{
						icon: "circle",
				    	right:10,
				    	top:10,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['01', '02', '03', '04','05', '06', '07']
				    },
				    yAxis: {
				    	name: '(mg/m³)',
						nameTextStyle: {
							color: "#7DA6EF",
							fontSize: 12,
						},
				    	type : 'value',
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: true,
							lineStyle:{
								color:"rgba(30, 57, 135, 0.57)"
							}
				        }
				    },
				    grid:{
				    	bottom:30,
				    	right:10
				    },
				    series: [
				    	{ 
				    		name:"粉尘颗粒浓度", 
				    		data: [0.6, 1.0, 0.1, 0.2,0.8, 0.5, 0.3],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(0, 129, 255, 0.71)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(0, 129, 255, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ 
				    		name:"PM2.5", 
				    		data: [0.2, 0.8, 0.3, 0.4,0.8, 1, 0.9],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(9, 70, 255, 0.7)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(9, 70, 255, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ 
				    		name:"PM10", 
				    		data: [0.2, 0.4, 0.9, 1,0.2, 0.4, 0.3],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(204, 95, 250, 0.71)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(204, 95, 250, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	}
				    ]
				}); 
			}
			
			
			new pageObj();
		</script>
	</body>
</html>
